<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>测试NODE子进程操作</p>
    <button v-on:click="connect">连接阅读器</button>
    <button v-on:click="startScan">开始扫描</button>
    <video id="video" width="500px" height="500px" autoplay="autoplay" muted="muted"></video>
    <button v-on:click="openMedia">开启摄像头</button>
  </div>
</template>

<script>
const ipc = require("electron").ipcRenderer;

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data: function() {
    return {
      messages: [],
      media: {
        mediaStreamTrack: null,
        video: null
      }
    };
  },
  methods: {
    connect: function() {
      ipc.send("asynchronous-message", "connect");
    },
    startScan: function() {
      ipc.send("asynchronous-message", "startScan");
    },
    openMedia: function() {
      let constraints = {
        video: {
          width: 500,
          height: 500,
          frameRate: {
            ideal: 15,
            max: 20
          }
        },
        audio: false
      };
      this.media.video = document.getElementById("video");
      let promise = navigator.mediaDevices.getUserMedia(constraints);
      console.log(promise);
      promise
        .then(mediaStream => {
          this.media.mediaStreamTrack = mediaStream.getVideoTracks();
          this.media.video.srcObject = mediaStream;
          this.media.video.play();
        })
        .catch(err => {
          console.log(err);
          console.log("不允许自动播放");
          this.media.video.srcObject = this.media.mediaStreamTrack;
          this.media.video.play();
        });
    }
  }
};
ipc.on("asynchronous-reply", function(event, arg) {
  //const message = `异步消息回复: ${arg}`;
  // alert(arg)
  // this.messages.push(arg);
  console.log(arg);
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
